import React, { useState, useEffect } from 'react'
import { Card, Row, Col, Timeline, Progress, Button, Tag, Statistic, List, Avatar } from 'antd'
import { useNavigate } from 'react-router-dom'
import { ArrowLeftOutlined, CheckCircleOutlined, ToolOutlined, EnvironmentOutlined, TeamOutlined } from '@ant-design/icons'

interface ConstructionProject {
  id: string
  name: string
  type: 'infrastructure' | 'digital' | 'agricultural' | 'environmental'
  village: string
  startDate: string
  endDate: string
  progress: number
  status: 'planning' | 'in-progress' | 'completed' | 'delayed'
  description: string
  budget: number
  spent: number
  manager: string
  participants: number
}

interface ConstructionTimeline {
  date: string
  content: string
  status: 'completed' | 'current' | 'upcoming'
}

const DigitalRuralConstruction: React.FC = () => {
  const navigate = useNavigate()
  const [projects, setProjects] = useState<ConstructionProject[]>([])
  const [timeline, setTimeline] = useState<ConstructionTimeline[]>([])
  const [loading, setLoading] = useState(true)

  // mock数据 - 与后台管理模块关联
  useEffect(() => {
    const mockProjects: ConstructionProject[] = [
      {
        id: '1',
        name: '智慧农业示范园建设',
        type: 'agricultural',
        village: '幸福村',
        startDate: '2024-01-01',
        endDate: '2024-06-30',
        progress: 65,
        status: 'in-progress',
        description: '建设现代化智慧农业示范园区，推广智能灌溉、无人机植保等技术',
        budget: 5000000,
        spent: 3250000,
        manager: '张大山',
        participants: 45
      },
      {
        id: '2',
        name: '数字乡村网络覆盖',
        type: 'digital',
        village: '和平村',
        startDate: '2024-02-01',
        endDate: '2024-12-31',
        progress: 30,
        status: 'in-progress',
        description: '实现全村5G网络覆盖，建设数字乡村服务平台',
        budget: 3000000,
        spent: 900000,
        manager: '李小花',
        participants: 28
      },
      {
        id: '3',
        name: '乡村道路升级改造',
        type: 'infrastructure',
        village: '富裕村',
        startDate: '2023-11-01',
        endDate: '2024-03-31',
        progress: 95,
        status: 'completed',
        description: '升级改造村内主干道，改善交通条件',
        budget: 2000000,
        spent: 1900000,
        manager: '王老五',
        participants: 32
      }
    ]

    const mockTimeline: ConstructionTimeline[] = [
      {
        date: '2024-01-15',
        content: '智慧农业示范园项目启动',
        status: 'completed'
      },
      {
        date: '2024-02-01',
        content: '数字乡村网络覆盖项目招标完成',
        status: 'completed'
      },
      {
        date: '2024-03-01',
        content: '乡村道路升级改造项目验收',
        status: 'current'
      },
      {
        date: '2024-04-01',
        content: '智慧农业示范园设备安装调试',
        status: 'upcoming'
      },
      {
        date: '2024-06-30',
        content: '智慧农业示范园项目完工',
        status: 'upcoming'
      }
    ]

    setTimeout(() => {
      setProjects(mockProjects)
      setTimeline(mockTimeline)
      setLoading(false)
    }, 1000)
  }, [])

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'infrastructure': return 'blue'
      case 'digital': return 'purple'
      case 'agricultural': return 'green'
      case 'environmental': return 'orange'
      default: return 'default'
    }
  }

  const getTypeText = (type: string) => {
    switch (type) {
      case 'infrastructure': return '基础设施'
      case 'digital': return '数字建设'
      case 'agricultural': return '农业项目'
      case 'environmental': return '环境治理'
      default: return type
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'planning': return 'orange'
      case 'in-progress': return 'blue'
      case 'completed': return 'green'
      case 'delayed': return 'red'
      default: return 'default'
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case 'planning': return '规划中'
      case 'in-progress': return '进行中'
      case 'completed': return '已完成'
      case 'delayed': return '延期'
      default: return status
    }
  }

  const totalBudget = projects.reduce((sum, project) => sum + project.budget, 0)
  const totalSpent = projects.reduce((sum, project) => sum + project.spent, 0)
  const completedProjects = projects.filter(project => project.status === 'completed').length

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card 
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <Button 
              type="text" 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate('/user-dashboard')}
              style={{ padding: '4px 8px' }}
            >
              返回
            </Button>
            <span>数字乡村建设</span>
          </div>
        }
        style={{ marginBottom: '24px' }}
      >
        {/* 统计信息 */}
        <Row gutter={16} style={{ marginBottom: '24px' }}>
          <Col span={6}>
            <Statistic title="在建项目" value={projects.length} prefix={<ToolOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="已完成项目" value={completedProjects} prefix={<CheckCircleOutlined />} valueStyle={{ color: '#52c41a' }} />
          </Col>
          <Col span={6}>
            <Statistic title="总预算" value={totalBudget} prefix="¥" suffix="元" />
          </Col>
          <Col span={6}>
            <Statistic title="已投入" value={totalSpent} prefix="¥" suffix="元" valueStyle={{ color: '#1890ff' }} />
          </Col>
        </Row>

        {/* 项目列表 */}
        <Card title="在建项目" style={{ marginBottom: '24px' }}>
          <List
            loading={loading}
            dataSource={projects}
            renderItem={project => (
              <List.Item
                actions={[
                  <Button type="link">查看详情</Button>,
                  <Button type="link">参与项目</Button>
                ]}
              >
                <List.Item.Meta
                  avatar={<Avatar icon={<EnvironmentOutlined />} style={{ backgroundColor: getTypeColor(project.type) }} />}
                  title={
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                      <span>{project.name}</span>
                      <Tag color={getTypeColor(project.type)}>{getTypeText(project.type)}</Tag>
                      <Tag color={getStatusColor(project.status)}>{getStatusText(project.status)}</Tag>
                      <Tag color="blue">{project.village}</Tag>
                    </div>
                  }
                  description={
                    <div>
                      <p>{project.description}</p>
                      <Row gutter={16} style={{ marginTop: '8px' }}>
                        <Col span={8}>
                          <Progress percent={project.progress} size="small" />
                        </Col>
                        <Col span={8}>
                          <TeamOutlined /> 负责人：{project.manager}
                        </Col>
                        <Col span={8}>
                          <TeamOutlined /> 参与人数：{project.participants}
                        </Col>
                      </Row>
                      <Row gutter={16} style={{ marginTop: '8px' }}>
                        <Col span={12}>
                          预算：¥{project.budget.toLocaleString()} | 已投入：¥{project.spent.toLocaleString()}
                        </Col>
                        <Col span={12}>
                          工期：{project.startDate} ~ {project.endDate}
                        </Col>
                      </Row>
                    </div>
                  }
                />
              </List.Item>
            )}
          />
        </Card>

        {/* 建设时间线 */}
        <Card title="建设时间线">
          <Timeline
            items={timeline.map(item => ({
              color: item.status === 'completed' ? 'green' : item.status === 'current' ? 'blue' : 'gray',
              children: (
                <div>
                  <p style={{ margin: 0, fontWeight: 'bold' }}>{item.date}</p>
                  <p style={{ margin: 0 }}>{item.content}</p>
                  <Tag color={item.status === 'completed' ? 'green' : item.status === 'current' ? 'blue' : 'orange'}>
                    {item.status === 'completed' ? '已完成' : item.status === 'current' ? '进行中' : '即将开始'}
                  </Tag>
                </div>
              )
            }))}
          />
        </Card>
      </Card>
    </div>
  )
}

export default DigitalRuralConstruction